<template>
  <view class="page container">
    <view class="avatar-box" @click="uploadAvater">
      <u-avatar :src="form.avatar" size="188rpx"></u-avatar>
      <image src="/static/my/camera.png" class="camera w-48 h-48"></image>
    </view>
    <view class="pt-100 pl-48 pr-48">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="180rpx">
        <u-form-item label="昵称" prop="nickname" borderBottom>
          <u-input v-model="form.nickname" border="none" color="#677585" inputAlign="right"
            @blur="handleBlur"></u-input>
        </u-form-item>
        <u-form-item label="手机号" prop="mobile" borderBottom>
          <u-input readonly v-model="form.mobile" border="none" color="#677585" inputAlign="right"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom-btn">
      <u-button :throttleTime="1500" :customStyle="btnStyle" @click="logout">退出登录</u-button>
    </view>
  </view>
</template>
<script>
import { updateUserInfoApi } from "@/services/my";
import { mapState } from "vuex";
export default {
  data() {
    return {
      btnStyle: {
        width: "686rpx",
        height: "88rpx",
        borderRadius: "16rpx",
        background: "#C5261D",
        color: "#fff",
      },
      form: {
        avatar: "",
        nickname: "",
        mobile: "",
      },
      rules: {
        nickname: {
          type: "string",
          required: true,
          message: "请输入昵称",
        },
        mobile: [
          {
            type: "string",
            required: false,
            message: "请输入手机号",
          },
          {
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              if (!value) return true;
              return uni.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    this.form.avatar = this.userInfo.avatar;
    this.form.nickname = this.userInfo.nickname;
    this.form.mobile = this.userInfo.mobile;
  },
  methods: {
    uploadAvater() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const file = res.tempFilePaths[0];
          this.$utils.uploadImg(file).then((ress) => {
            const { url, fullurl } = ress;
            updateUserInfoApi({ avatar: fullurl }).then((res) => {
              if (res.code == 1) {
                this.$u.toast("更新成功");
                this.form.avatar = fullurl;
                this.$store.dispatch("user/getUserInfo");
              }
            });
          });
        },
      });
    },
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定退出登录",
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    handleBlur() {
      if (this.form.nickname.length > 10) {
        this.$u.toast("昵称不能超过10个字");
        return
      }
      if (!this.form.nickname) {
        this.$u.toast("昵称不能为空");
        return
      }
      updateUserInfoApi({ nickname: this.form.nickname }).then((res) => {
        if (res.code == 1) {
          this.$u.toast("更新成功");
          this.$store.dispatch("user/getUserInfo");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  .avatar-box {
    position: relative;
    display: inline-block;
    justify-content: center;
    left: 50%;
    transform: translate(-50%);
    top: 72rpx;

    .camera {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .bottom-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60rpx;
    display: flex;
    justify-content: center;
  }
}
</style>